<template>
  <el-select
    v-bind="$attrs"
    ref="selectRef"
    :model-value="modelValue"
    @change="handleChange"
    @clear="emit('clear')"
    @blur="(e) => emit('blur', e)"
    @focus="(e) => emit('focus', e)"
    @remove-tag="(tagValue) => emit('remove-tag', tagValue)"
  >
    <template
      v-for="item in $attrs.slots"
      #[item.name]="scopedData"
      :key="item.name"
    >
      <component :is="item.content" v-bind="scopedData" />
    </template>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :disabled="item.disabled"
    />
  </el-select>
</template>

<script setup>
const modelValue = defineModel({
  type: [String, Number, Boolean, Object, Array],
  default: () => [],
})
const emit = defineEmits(['change', 'clear', 'blur', 'focus', 'remove-tag'])
defineProps({
  options: {
    type: Array,
    default: () => [],
  },
})

const selectRef = ref(null)

function handleChange(value) {
  modelValue.value = value
  emit('change', value)
}

defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return selectRef.value?.[key]
      },
      has(target, key) {
        return key in selectRef.value
      },
    },
  ),
)
</script>
